<template>
    <div>
        <MyHeader>
            <img src="../../assets/1.png" alt="" class="img">
            <div class="wen">标题</div>
            <img src="../../assets/2222.png" alt="" class="image">
        </MyHeader>
        <div class="tab">
            <div v-for="(item, index) in datalist" :key="item.id">
                <div class="tab1" @click="dian(item)" :class="{ hhh: active === item.id }">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="kjh">
            <div class="hjk" @scroll="handleScroll">
                <div v-for="(item, ind) in kunlist" :key="ind" class="tablist" @click="Detail(item.id, item)">
                    <dl>
                        <dt>
                            <div class="huii">
                                <img :src="item.thumbnail" alt="" class="gg">
                            </div>
                        </dt>
                        <div class="wz">{{ item.title }}</div>
                    </dl>
                </div>
            </div>
            <div v-if="isLoading" class="loading-tip">正在加载更多...</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import MyHeader from '@/components/MyHeader.vue';
import router from '@/router';
import axios from 'axios';
import { onMounted, ref, onUnmounted } from 'vue';

const active = ref(1);
const datalist = ref([]);
const list = ref([]);
const kunlist = ref([]);

const dian = (item: any, index: any) => {
  active.value = item.id;
  page.value = 1;  // 重置页数
  kunlist.value = [];  // 清空数据
  getlist2(active.value);
}
const page = ref(1);
const isLoading = ref(false);
const getlist = async () => {
  await axios.get('/health/share/information/v1/findInformationPlateList').then(res => {
    datalist.value = res.data.result;
    // console.log(res)
  })

}
getlist()
const getlist1 = async () => {
  await axios.get('/health/share/knowledgeBase/v1/findDepartment').then(res => {

    list.value = res.data.result
    console.log(res)
  })
  // console.log(res)

}
getlist1()

const getlist2 = async () => {
  if (isLoading.value) return;
  isLoading.value = true;
  await axios.get('/health/share/information/v1/findInformationList', {
    params: {
      plateId: active.value,
      page: page.value,
      count: 5,
    }
  }).then(res => {
    // console.log(res)
    const newData = res.data.result;
    // console.log(newData)
    if (newData && newData.length > 0) {
      kunlist.value.push(...newData);
      page.value += 1;
    } else {
      console.log("没有更多数据了");
    }
  }).finally(() => {
    isLoading.value = false;
  });
};

const handleScroll = () => {
  setTimeout(() => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    if (scrollTop + clientHeight >= scrollHeight - 80) {
      getlist2();
    }
  }, 1000)
};

onMounted(() => {
  getlist2(active.value);
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

</script>

<style scoped lang="scss">
.img {
    width: 25px;
    height: 25px;
    margin-left: 5px;
    margin-top: 5px;
}

.image {
    width: 20px;
    height: 25px;
    margin-top: 5px;
    margin-right: 5px;
}
.kan{
  margin-left: 10px;
}
html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}
.loading-tip {
  text-align: center;
  font-size: 10px; // 20px * 0.5 = 10px
  margin-top: 5px; // 10px * 0.5 = 5px
  color: #888;
}

.tablist {
  width: 100%;
  height: 85px; // 170px * 0.5 = 85px
}

.wz {
  font-size: 14px; // 28px * 0.5 = 14px
  margin-top: 5px; // 10px * 0.5 = 5px
  width: 250px; // 500px * 0.5 = 250px
  margin-left: 16.5px; // 33px * 0.5 = 16.5px
}

.huii {
  width: 115px; // 230px * 0.5 = 115px
  height: 80px; // 160px * 0.5 = 80px
  margin: 0 auto;
  margin-top: 5px; // 10px * 0.5 = 5px

  img {
    width: 100%;
    height: 100%;
    margin-left: 9px; // 18px * 0.5 = 9px
  }
}

dl {
  display: flex;
  margin-top: 2.5px; // 5px * 0.5 = 2.5px
}

.kjh {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.hjk {
  width: 100%;
  height: 100%;
}

.hhh {
  color: blue;
}

.khj {
  display: block;
  width: 105px; // 210px * 0.5 = 105px
  height: 15%; // 30% * 0.5 = 15%，按比例调整高度占比
  text-align: center;
}

.lok {
  width: 65px; // 130px * 0.5 = 65px
  height: 65px; // 130px * 0.5 = 65px
  margin-left: 20px; // 40px * 0.5 = 20px
}

.jun2 {
  width: 90px; // 180px * 0.5 = 90px
  height: 100px; // 200px * 0.5 = 100px
  margin-top: 5px; // 10px * 0.5 = 5px
}

.lkj {
  width: 100%;
  height: 25px; // 50px * 0.5 = 25px
}

.tab1 {
  font-size: 14px; // 28px * 0.5 = 14px
  margin-left: 15px; // 30px * 0.5 = 15px
}

.ghj {
  width: 70px; // 140px * 0.5 = 70px
  height: 70px; // 140px * 0.5 = 70px
}

.mn {
  width: 100%;
  height: 147.5px; // 295px * 0.5 = 147.5px
}

.lll {
  width: 100%;
  height: 1450px; // 2900px * 0.5 = 1450px
}

.tab {
  width: 100%;
  height: 45px; // 90px * 0.5 = 45px
  border: 1px solid #ccc;
  display: flex;
  line-height: 45px; // 与高度对应调整
}

.jjj {
  width: 100%;
  height: 170px; // 340px * 0.5 = 170px
  border: 1px solid #ccc;
  margin-top: 1.5px; // 3px * 0.5 = 1.5px
}

.hh {
  width: 100%;
}

.jian1 {
  width: 100%;
  height: 30px; // 60px * 0.5 = 30px
  border: 1px solid #ccc;
  margin-top: 2.5px; // 5px * 0.5 = 2.5px
}

.jian {
  width: 100%;
  height: 30px; // 60px * 0.5 = 30px
  border: 1px solid #ccc;
}

.kang {
  margin-left: 7.5px; // 15px * 0.5 = 7.5px
  margin-top: 7.5px; // 15px * 0.5 = 7.5px
}

.kun {
  width: 100%;
  height: 147.5px; // 295px * 0.5 = 147.5px
}

.jun {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 200px; // 400px * 0.5 = 200px
  border-top: 1px; // 2px * 0.5 = 1px
  margin-top: 1.5px; // 3px * 0.5 = 1.5px
  border-bottom: 0.5px; // 1px * 0.5 = 0.5px
}

.jun1 {
  width: 75px; // 150px * 0.5 = 75px
  height: 65px; // 130px * 0.5 = 65px
  margin-left: 16px; // 32px * 0.5 = 16px
  margin-top: 10px; // 20px * 0.5 = 10px
}

.nei {
  text-align: center;
}

.zhen {
  width: 100%;
  height: 30px; // 60px * 0.5 = 30px
  border-top: 0.5px; // 1px * 0.5 = 0.5px
  border-bottom: 0.5px; // 1px * 0.5 = 0.5px
  margin-top: 1.5px; // 3px * 0.5 = 1.5px
}

.zi {
  margin-left: 7.5px; // 15px * 0.5 = 7.5px
  margin-top: 7.5px; // 15px * 0.5 = 7.5px
}

.kun1 {
  width: 375px; // 750px * 0.5 = 375px
  height: 145px; // 290px * 0.5 = 145px
}

.kun2 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kun3 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kun4 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kun5 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kun6 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kun7 {
  width: 100%;
  height: 75px; // 150px * 0.5 = 75px
}

.kh {
  display: flex;
}

.kk {
  width: 50%;
  height: 200px; // 400px * 0.5 = 200px
  border: 1px solid #ccc;
  z-index: 9999;
  margin-top: 1.5px; // 3px * 0.5 = 1.5px
}

.kk1 {
  width: 50%;
  height: 200px; // 400px * 0.5 = 200px
  border: 1px solid #ccc;
  z-index: 9999;
  margin-top: 1.5px; // 3px * 0.5 = 1.5px
  margin-left: 2.5px; // 5px * 0.5 = 2.5px
}

.kun1 {
  width: 100%;
  height: 65px; // 130px * 0.5 = 65px
  margin-top: 24px; // 48px * 0.5 = 24px
}
.zhi {
  margin-left: 7.5px; // 15px * 0.5 = 7.5px
  margin-top: 7.5px; // 15px * 0.5 = 7.5px
}

.chang {
  margin-left: 7.5px; // 15px * 0.5 = 7.5px
  margin-top: 4px; // 8px * 0.5 = 4px
}

.box {
  width: 100%;
  height: 150px; // 300px * 0.5 = 150px
  border-bottom: 1px; // 2px * 0.5 = 1px
  margin-top: 40px; // 80px * 0.5 = 40px
}

</style>
